<template>
  <div class="dashboard-page">
    <el-card class="dashboard-card">
      <template #header>
        <div class="card-header">
          <span>系统首页</span>
        </div>
      </template>
      
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-item">
              <div class="stat-number">156</div>
              <div class="stat-label">用户总数</div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-item">
              <div class="stat-number">234</div>
              <div class="stat-label">商品总数</div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-item">
              <div class="stat-number">89</div>
              <div class="stat-label">订单总数</div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-item">
              <div class="stat-number">125000</div>
              <div class="stat-label">总收入</div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      
      <el-row :gutter="20" style="margin-top: 20px;">
        <el-col :span="12">
          <el-card>
            <template #header>
              <span>用户信息</span>
            </template>
            <div v-if="userStore.userInfo">
              <p><strong>用户名：</strong>{{ userStore.userInfo.username }}</p>
              <p><strong>真实姓名：</strong>{{ userStore.userInfo.realName }}</p>
              <p><strong>角色：</strong>{{ userStore.userInfo.roleName || '未分配' }}</p>
            </div>
            <div v-else>
              <p>未获取到用户信息</p>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card>
            <template #header>
              <span>权限信息</span>
            </template>
            <div v-if="userStore.permissions && userStore.permissions.length > 0">
              <p><strong>权限数量：</strong>{{ userStore.permissions.length }}</p>
              <p><strong>权限列表：</strong></p>
              <el-tag 
                v-for="perm in userStore.permissions.slice(0, 10)" 
                :key="perm" 
                size="small" 
                style="margin: 2px;"
              >
                {{ perm }}
              </el-tag>
              <p v-if="userStore.permissions.length > 10" style="margin-top: 10px; color: #909399;">
                还有 {{ userStore.permissions.length - 10 }} 个权限...
              </p>
            </div>
            <div v-else>
              <p>未获取到权限信息</p>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup>
import { useUserStore } from '@/store/user'

const userStore = useUserStore()
</script>

<style scoped>
.dashboard-page {
  padding: 20px;
}

.dashboard-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stat-card {
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.stat-item {
  padding: 20px 0;
}

.stat-number {
  font-size: 32px;
  font-weight: bold;
  color: #409eff;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 14px;
  color: #606266;
}
</style> 